<template>
	<view class="">
		<view class="topinput">
			<input type="text" placeholder="搜索" v-model="filterText">
			<select v-model="selectdata">
				<option value=''>供应商名称</option>
				<option>供应商编号</option>
				<option>供应商联系人</option>
			</select>
		</view>
		<view class="box" v-for="(item,index) in filterList" :key="index" 
		@click="topage(item.name,item.bank_account,item.id)">
			<view class="boxcent">
				<view class="topcent">
					<view>
						<text class="text">供应商名称:</text>
						<text class="text1">{{item.name}}</text>
					</view>
					
				</view>
				<view class="headcent">
					<view class="tophead">
						<text class="text">资金账户:</text>
						<text class="text1">{{item.bank_account}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],selectdata:'',filterText:'',option:{},options:{},data:{},
				arr1:[],arr2:[]
			}
		},
		computed: {
			filterList() {
				let selectdata = this.selectdata;
				var arr = []
				this.list.forEach((item) => arr.push(item))	
				if (this.filterText) {
					if(selectdata==''){
						arr = this.list.filter(item => item.name.includes(this.filterText))
					}else if(selectdata=='供应商编号'){
						arr = this.list.filter(item => item.id.includes(this.filterText))
					}else if(selectdata=='供应商联系人'){
						arr = this.list.filter(item => item.linl_name.includes(this.filterText))
					}	
				}
				return arr
			}	
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.option = option
			if(this.option.typevalue == '入库'){
				this.getdata();
			}else {
				this.getdata1();
			}
		},
		methods: {
			async getdata(){
				const res1 = await this.Request({
					url:'api/supplie/getsupalldata'
				})
				this.list = res1.data;
			},
			async getdata1(){
				const res1 = await this.Request({
					url:'api/supplie/getsupalldata'
				})
				this.arr1 = res1.data;
				const res = await this.Request({
					url:'api/stock/getsupname',
					method:'POST',
					data:{name:this.option.stoname}
				})
				for(let i= 0;i<res.data.length;i++) {
				     this.arr2[i] = res.data[i].supplier_id;
				}
				function Arr(array) {
				    var arr = []; //一个新的数组存放去重后的结果
				    for (var i = 0; i < array.length; i++) {
				        if (arr.indexOf(array[i]) == -1) { //indexof()方法判断在数组中的位置，若不存在，返回-1
				            arr.push(array[i]);
				        }
				    }
				    return arr;
				}
				var data1= Arr(this.arr2);
				for(var i=0;i<this.arr1.length;i++){
					if(data1.includes(this.arr1[i].id) == false){
						delete this.arr1[i]
					}
				}
				this.list = this.arr1;
			},
			topage(supname,bank_account,supid){
				var pages = getCurrentPages();
				var prePage = pages[pages.length - 2]; //上个页面
				prePage.sname=supname;  //赋值
				prePage.saccount=bank_account;  //赋值
				prePage.sid=supid;  //赋值
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.topinput{
			display: flex;
			input{
				height: 30px;
				width: 200px;
				margin: 15px 0 15px 20px;
				border-radius: 10px;
				border: 2px solid #919191;
			}
			select{
				margin: 15px 0 15px 30px;
				border-radius: 10px;
			}
	}
	.boxcent{
		position: relative;
		width: 100%;
		background-color: #ffff7f;
		border: 1px solid  #ccc;
		border-radius: 10px;
		.text1{
			font-size: 14px;
			margin-left: 7px;
		}
		.topcent{
			display: flex;
			margin: 10px 0 0 40px;
			.text{
				font-size: 17px;
				font-weight: 700;
			}
			.head{
				position: absolute;
				margin-left: 162px;
				.text{
					font-size: 15px;
					font-weight: 500;
				}
			}
		}
		.headcent{
			margin: 15px 0 5px 40px;
			display: flex;
			.tophead{
				.text{
					font-size: 15px;
					// font-weight: 500;
				}
			}
			.head{
				margin-left: 27px;
				.text{
					font-size: 15px;
					// font-weight: 500;
				}
			}
		}
	}
	.box :active{
		background-color: #ffffff;
	}
</style>